<template>
	<!-- <uni-popup ref="popupEnsure" type="bottom" @change="removeCss($event)">
		<order-pop-common title="服务保障" @closePop="closePop('popupEnsure')">
			<scroll-view class="popup-con" scroll-y="true" slot="popup-con">
				<view class="con-item" >
				<image :src="imageUrl" mode="widthFix"></image>
				</view>
			</scroll-view>
			<view class="ok-box" slot="popup-btn"><button type="default" class="ok-btn" @click="closePop('popupEnsure')">朕知道了</button></view>
		</order-pop-common>
	</uni-popup> -->
   <uni-popup ref="popupEnsure" type="bottom"  @change="removeCss($event)">
                <view class="popup-bottom-box">
                	<view class="bot-title">
                		<view class="title-txt">服务保障</view>
                		<view class="title-close" @click="closePop('popupEnsure')">
                			<view class="image-wrapper">
                				<image src="@/static/img/close.png" mode="aspectFit"></image>
                			</view>
                		</view>
                	</view>
                  <scroll-view scroll-y="true" class="bot-con" v-if="bearFees == '自费'">
                    <view class="bot-title-box">
                      <view class="icon-box"></view>
                      <view class="title-text-box">一键无忧下单</view>
                    </view>
                    <view class="bot-content-box">
                      您可不做任何选择，直接点击右下角的“一键无忧下单”按钮下单。下单后，法力平台将安排法务专员，一对一免费为您审查、补全订单。您确认新订单后，如需付款的，请根据新订单提示付款。法力平台将在收取新订单律师费后，全额退回原订单的律师费到您的余额账户。
                    </view>
                    <view class="bot-title-box">
                      <view class="icon-box"></view>
                      <view class="title-text-box">下错单任改</view>
                    </view>
                    <view class="bot-content-box">
                      如您下单有误，无需担心。法力平台将在您下单后安排法务专员，一对一免费为您修改订单。您确认新订单后，如需付款的，请根据新订单提示付款。法力平台将在收取新订单律师费后，全额退回原订单的律师费到您的余额账户。
                    </view>
                    <view class="bot-title-box">
                      <view class="icon-box"></view>
                      <view class="title-text-box">免费取消订单</view>
                    </view>
                    <view class="bot-content-box">
                      法力平台成功为您匹配法务专员或律师前，您均可免费取消订单，重新下单选择服务领域或服务人员或服务阶段等，服务费将全额保留在您的账户里。
                    </view>
                    <view class="bot-title-box">
                      <view class="icon-box"></view>
                      <view class="title-text-box">无理由更换律师</view>
                    </view>
                    <view class="bot-content-box">
                      匹配律师成功后15分钟内，您可以免费无理由更换律师；
                    </view>
                    <view class="bot-title-box">
                      <view class="icon-box"></view>
                      <view class="title-text-box">平台托管费用</view>
                    </view>
                    <view class="bot-content-box">

                      您支付的服务费用将先由法力平台托管，在具备以下任一条件时，法力平台才向律师划转服务费用：</br>
                      <view class="flex-box"><div class="fontNormal marginLeft5">a、</div><p>律师完成服务后，您和律师任一方发起服务完成申请，经另一方确认后；</p></view>
                      <view class="flex-box"><div class="fontNormal marginLeft5">b、</div><p>律师完成服务后，您和律师任一方发起服务完成申请，另一方收到申请后24小时内未回应，法力平台默认服务完成后；</p></view>
                      <view class="flex-box"><div class="fontNormal marginLeft5">c、</div><p>您与律师双方确认解除委托后。</p></view>
                    </view>
                    <view class="bot-title-box">
                      <view class="icon-box"></view>
                      <view class="title-text-box">边用边付，轻松付</view>
                    </view>
                    <view class="bot-content-box">

                      服务费用分3期支付，任一期付款到期日前7天及到期日当日，法力平台将向您发出付款提示信息。具体支付时间如下：</br>
                      <view class="flex-box"><div class="fontNormal marginLeft5">a、</div><p>第一期：您提交订单时支付；</p></view>
                      <view class="flex-box"><div class="fontNormal marginLeft5">b、</div><p>第二期：您提交订单的第二个月的25日支付；</p></view>
                      <view class="flex-box"><div class="fontNormal marginLeft5">c、</div><p>第三期：您提交订单的第三个月的25日支付。</p></view>
                      如您与律师协商一致提前解除委托的，请按提示流程支付完毕剩余费用。

                    </view>
                    <view class="bot-title-box">
                      <view class="icon-box"></view>
                      <view class="title-text-box">先用后付，无忧付</view>
                    </view>
                    <view class="bot-content-box">

                      您提交订单时暂不需要支付服务费用。在具备以下任一条件时，您才需要支付服务费用：</br>
                      <view class="flex-box"><div class="fontNormal marginLeft5">a、</div><p>律师完成服务后，您和律师任一方发起服务完成申请，经另一方确认的；</p></view>
                      <view class="flex-box"><div class="fontNormal marginLeft5">b、</div><p>律师完成服务后，您和律师任一方发起服务完成申请，另一方收到申请后24小时内未回应，法力平台默认服务完成的；</p></view>
                      <view class="flex-box"><div class="fontNormal marginLeft5">c、</div><p>您与律师协商一致提前解除委托的，请按提示流程支付完毕剩余费用。</p></view>

                    </view>
                    <view class="bot-title-box">
                      <view class="icon-box"></view>
                      <view class="title-text-box">隐私保护</view>
                    </view>
                    <view class="bot-content-box">
                      法力平台将对您的姓名、电话号码等敏感信息用字符*进行掩码设置。您的订单仅显示给法力平台认证的法务专员和专业律师，普通用户看不到您的订单，法力平台将全力保护您的隐私。
                    </view>
                    <view class="bot-title-box">
                      <view class="icon-box"></view>
                      <view class="title-text-box">保险保障</view>
                    </view>
                    <view class="bot-content-box">
                      法力平台的律师均已购买律师职业责任险，当律师因其执业失误行为造成您经济损失时，将由保险公司负责赔偿，全面保障您的权益。
                    </view>
                  </scroll-view>
                  <scroll-view scroll-y="true" class="bot-con" v-else>
                    <view class="bot-title-box">
                      <view class="icon-box"></view>
                      <view class="title-text-box">白条变现</view>
                    </view>
                    <view class="bot-content-box">
                      法院对您的案件作出生效裁判文书后，您即可凭生效裁判文书向投资人申请领现金，不论您的案件最终是否能回款。到时请联系您的代理律师协助您办理。
                    </view>
                    <view class="bot-title-box">
                      <view class="icon-box"></view>
                      <view class="title-text-box">一键无忧下单</view>
                    </view>
                    <view class="bot-content-box">
                      服务选项中标注*的，您可自由选择。如果您看不明白服务选项，可以先不做选择，直接点击右下角的“一键无忧下单”按钮，下单后再由法务专员帮您审查、修改订单。
                    </view>
                    <view class="bot-title-box">
                      <view class="icon-box"></view>
                      <view class="title-text-box">法务专员免费核单</view>
                    </view>
                    <view class="bot-content-box">
                      您下单后，法力平台将安排法务专员，一对一免费协助您初审案件基本情况，补全订单。
                    </view>
                    <view class="bot-title-box">
                      <view class="icon-box"></view>
                      <view class="title-text-box">下错单任改</view>
                    </view>
                    <view class="bot-content-box">
                      如您下单有误，无需担心，法力平台将安排法务专员，免费为您审查、填写或更改订单。
                    </view>
                    <view class="bot-title-box">
                      <view class="icon-box"></view>
                      <view class="title-text-box">免费取消订单</view>
                    </view>
                    <view class="bot-content-box">
                      法力平台成功为您匹配法务专员或律师前，您均可免费取消订单，重新下单选择服务领域或服务人员或服务阶段等，服务费将全额保留在您的账户里。
                    </view>
                    <view class="bot-title-box">
                      <view class="icon-box"></view>
                      <view class="title-text-box">平台托管费用</view>
                    </view>
                    <view class="bot-content-box">

                      您支付的服务费用将先由法力平台托管，在具备以下任一条件时，法力平台才向律师、债权投资人划转服务费用：</br>
					   <view class="flex-box"><div class="fontNormal marginLeft5">a、</div><p>律师完成服务后，您和律师任一方发起服务完成申请，经另一方及投资人先后确认后；</p></view>
						<view class="flex-box"><div class="fontNormal marginLeft5">b、</div><p>律师完成服务后，您和律师任一方发起服务完成申请，另一方收到申请后24小时内未回应，法力平台默认服务完成，并经投资人确认后；</p></view>
						<view class="flex-box"><div class="fontNormal marginLeft5">c、</div><p>您与律师、投资人确认解除委托后。</p></view>
                    </view>
					<view class="bot-title-box">
                      <view class="icon-box"></view>
                      <view class="title-text-box">隐私保护</view>
                    </view>
                    <view class="bot-content-box">
                      法力平台将对您的姓名、电话号码等敏感信息用字符*进行掩码设置。您的订单仅显示给法力平台认证的法务专员和专业律师，普通用户看不到您的订单，法力平台将全力保护您的隐私。
                    </view>
					<view class="bot-title-box">
                      <view class="icon-box"></view>
                      <view class="title-text-box">保险保障</view>
                    </view>
                    <view class="bot-content-box">
                      法力平台的律师均已购买律师职业责任险，当律师因其执业失误行为造成您经济损失时，将由保险公司负责赔偿，全面保障您的权益。
                    </view>
                  </scroll-view>
                        <view class="bot-save">
                            <view class="save-box" @click="closePop('popupEnsure')">朕知道了</view>
                        </view>
                    </view>
            </uni-popup>



</template>

<script>
	import $ from 'jquery'
	export default {

	props: ['info','bearFees'],
	data() {
		return {
            imageUrl:this.bearFees == '自费' ? require('@/static/img/order-service.png') : require('@/static/img/order-service-1.png')
        };
	},
	created() {},
	methods: {
		removeCss(e){
			this.is_poup = e.show
			if(this.is_poup){
				$(document.body).css({'overflow':'hidden'})
			}else{
				$(document.body).css({'overflow':''})
			}
		},
	},
    watch:{
        'bearFees':function(val){
            if(val == '自费'){
                this.imageUrl = require('@/static/img/order-service.png')
            }else{
                this.imageUrl = require('@/static/img/order-service-1.png')
            }
        }
    }
};
</script>

<style lang="scss" scoped>
	// 弹出层
	.popup-con {
		max-height: 800rpx;
		.con-item {
			padding: 0 30rpx;
			margin-bottom: 10rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
	}
	  .popup-bottom-box {
    	background-color: #ffffff;
    	overflow: auto;
    	// border-top-left-radius: 26rpx;
    	// border-top-right-radius: 26rpx;

    	.bot-title {
    		display: flex;
    		align-items: center;

    		.title-txt {
    			flex: 1;
    			text-align: center;
    			padding: 20rpx;
    			font-weight: bold;
    		}

    		.title-close {
    			width: 80rpx;
    			height: 80rpx;
    			text-align: center;
    			position: absolute;
    			top: 0;
    			right: 0;
    			display: flex;
    			align-items: center;
    			justify-content: center;

    			.image-wrapper {
    				width: 26rpx;
    				height: 26rpx;
    				vertical-align: middle;

    				image {
    					width: 100%;
    					height: 100%;
    				}
    			}
    		}
    	}

    	.bot-con {
    		padding: 0 30rpx;
            height: 800rpx;
            width: calc(100% - 60rpx);
            // overflow-y: scroll;
    		.service-list {
    			margin-bottom: 20rpx;
    		}
            .bot-title-box{
                display: flex;
                align-items: center;
                height: 45rpx;
                .icon-box{
                    width: 12rpx;
                    height: 30rpx;
                    background: #FFC900;
                    opacity: 1;
                    border-radius: 6rpx;
                }
                .title-text-box{
                    margin-left: 5rpx;
                    height: 45rpx;
                    font-size: 32rpx;
                    font-family: PingFang SC;
                    font-weight: bold;
                    color: #000000;
                    opacity: 1;
                }
            }
            .bot-content-box{
                margin: 10rpx 0rpx 10rpx 17rpx;
                font-family: PingFang SC;
                font-weight: 400;
                color: #333;
                opacity: 1;
				text-align: justify;
              line-height: 52rpx;
                span{
                    color: #000;
                    font-weight: 600;
                }
            }
            .line-box{
                width: 100%;
                height: 1rpx;
                border: 1px solid #D5D5D5;
                background-color: #D5D5D5;
                margin: 15rpx 0rpx;
            }
    	}
        .bot-save{
            width: 100%;
            height: 102rpx;
            background: rgba(255, 255, 255, 0.39);
            box-shadow: 0px -3px 6px rgba(0, 0, 0, 0.16);
            opacity: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            .save-box{
               width: 60%;
                height: 60rpx;
                // border-radius: 30rpx;
                background-color: #F9B804;
                color: #fff;
                font-size: 24rpx;
                font-family: PingFang SC;
                font-weight: bold;
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }
    }
	.flex-box{
		display: flex;
      position: relative;
	      font-size: 13px;
	.leftpoint{
	  position:absolute;
	  left:-1px;
	  font-weight: normal;
	  color:#303133;
	}
	.fontNormal{
	  font-weight: normal;
	  min-width: 22rpx;
	  max-width: 22rpx;
	}
	.marginLeft5{
	  display: inline-block;
	  margin-right:8px;
	}
}
</style>
